<template>
    <div>
      <div>
        <h2>1.v-bind的基本使用</h2>
        <img v-bind:src="imgUrl" alt="" style="width: 60px" />
        <a v-bind:href="link">百度一下</a>
      </div>
      <div>
        <h2>2.v-bind 提供一个语法糖</h2>
        <!-- 2.v-bind 提供一个语法糖 : -->
        <img :src="imgUrl" alt="" style="width: 40px" />
        <div>
          直接绑定 imgUrl 字符串给src,原生html语法
          <hr />
          <img src="https://v2.cn.vuejs.org/images/logo.svg" alt="" style="width: 40px" />
        </div>
      </div>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vbind',
    data() {
      return {
        imgUrl: 'https://v2.cn.vuejs.org/images/logo.svg',
        link: 'https://www.baidu.com'
      }
    }
  }
  </script> -->
  <script setup>
  import { ref } from 'vue'
  defineOptions({
    name: 'vbind'
  })
  const imgUrl = ref('https://v2.cn.vuejs.org/images/logo.svg')
  const link = ref('https://www.baidu.com')
  </script>
  
  <style lang="scss" scoped></style>
  